<template>
    <div>
        <el-form @submit.native.prevent :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
            <el-form-item prop="serialNumber">
                <el-input v-model="queryParams.serialNumber" size="small" :placeholder="$t('device.index.105953-3')" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">{{ $t('search') }}</el-button>
                <el-button icon="el-icon-refresh" size="small" @click="resetQuery">{{ $t('reset') }}</el-button>
            </el-form-item>
            <el-form-item style="float: right">
                <el-button icon="el-icon-plus" type="primary" size="small" @click="handleAdd">{{ $t('add') }}</el-button>
            </el-form-item>
        </el-form>

        <el-table v-loading="loading" :data="deviceBindList" size="small" :border="false">
            <el-table-column label="id" align="center" prop="id" width="80" />
            <el-table-column :label="$t('device.index.105953-0')" align="left" prop="deviceName" />
            <el-table-column :label="$t('device.index.105953-2')" align="left" prop="serialNumber" />
            <el-table-column :label="$t('opation')" align="center" width="80">
                <template slot-scope="scope">
                    <el-button style="color: #f56c6c" size="small" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">{{ $t('topo.topoToolbox.250932-9') }}</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

        <el-dialog :title="$t('topo.topoToolbox.250932-10')" :visible.sync="isDeviceDialog" width="900px" append-to-body :close-on-click-modal="false">
            <device ref="device" />
            <span slot="footer" class="dialog-footer">
                <el-button @click="isDeviceDialog = false">{{ $t('cancel') }}</el-button>
                <el-button type="primary" @click="handleSelectDevice">{{ $t('confirm') }}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import Device from './device';
import { listDeviceBind, saveDeviceBind, removeDeviceBind } from '@/api/scada/topo';

export default {
    components: {
        Device,
    },
    name: 'DeviceBind',
    data() {
        return {
            loading: true, // 遮罩层
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                serialNumber: '',
                scadaGuid: this.$route.query.guid,
            },
            deviceBindList: [], // 关联设备表格数据
            total: 0, // 总条数
            isDeviceDialog: false, // 设备对话框
            serialNumbers: '', // 选中设备
        };
    },
    mounted() {
        this.getList();
    },
    methods: {
        // 查询云组态组件关联设备列表
        getList() {
            this.loading = true;
            listDeviceBind(this.queryParams)
                .then((res) => {
                    if (res.code == 200) {
                        this.deviceBindList = res.rows;
                        this.total = res.total;
                    }
                    this.loading = false;
                })
                .catch((err) => {
                    console.log(err);
                    this.loading = false;
                });
        },
        // 搜索按钮操作
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        // 重置按钮操作
        resetQuery() {
            this.resetForm('queryForm');
            this.handleQuery();
        },
        // 新增按钮操作
        handleAdd() {
            this.isDeviceDialog = true;
            this.$refs.device && this.$refs.device.clearSelection();
        },
        // 选择设备
        handleSelectDevice() {
            this.isDeviceDialog = false;
            const list = this.$refs.device.selectRowDataClick();
            this.serialNumbers = list.join(',');
            this.saveBind();
        },
        saveBind() {
            let params = {
                scadaGuid: this.$route.query.guid,
                serialNumbers: this.serialNumbers,
            };
            saveDeviceBind(params)
                .then((res) => {
                    this.getList();
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const ids = row.id;
            let that = this;
            this.$confirm(that.$t('topo.topoToolbox.250932-11')).then(function () {
                removeDeviceBind(ids)
                    .then((res) => {
                        if (res.code === 200) {
                            that.$modal.msgSuccess(that.$t('topo.topoToolbox.250932-12'));
                            that.getList();
                        }
                    })
                    .catch((err) => {
                        that.$modal.msgError(err);
                    });
            });
        },
    },
};
</script>

<style lang="scss" scoped></style>
